<template>
<div class="playController">
    <div class="left">
        <img :src="playlist[playCurrentIndex].al.picUrl" @click="show=true">
        <div class="content">
            <div class="title">{{playlist[playCurrentIndex].al.name}}</div>
            <div class="tips">横滑可以切换上下首哦</div>
        </div>
    </div>
    <div class="right">
        <i class="iconfont icon-a4gl-play123" @click="play" v-show="!isPlay"></i>
        <i class="iconfont icon-zanting_huaban1" @click="play" v-show="isPlay"></i>       
        <i class="iconfont icon-liebiao2" @click="play"></i>        
    </div>
    <playMusic 
     :play="play"
     :bofang="bofang"
     :isPlay='isPlay'
     :isRotate='isRotate'
     :paused='paused' 
     :nowTime="currentTime"
     @back="show=false"
     v-show="show" 
     :playDetail="playlist[playCurrentIndex]"
     ref='isLyric'
     >
     </playMusic>
    <audio 
     ref="audio"
     autoplay
     @timeupdate="audioTimeUpdate()"
     @pause="musicPause()"
     @playing="musicPlaying()"
     @ended="end()"
     :src="`https://music.163.com/song/media/outer/url?id=${playlist[playCurrentIndex].id}.mp3`"
     ></audio>
</div>
</template>

<script>
import {mapState,mapMutations} from 'vuex';
import playMusic from '@/components/playMusic.vue';
import bus from '@/utils/eventBus.js'
export default {
   props:['listPlay'],
    data() {
        return {
          isPlay: false,  //控制音乐播放，true正在播放
          paused: true,   //暂停播放状态，true表示暂停
          show:false,     //展示磁盘和歌词页面,false表示不展示
          isRotate:false, //控制磁盘旋转,false为不旋转
          currentTime:0,  //当前音乐的播放时间,默认是秒，要转换成毫秒
          schemaIndex: 0, //音乐播放方式--0:顺序、1：随机、2：单曲
          listPlay:false,
        }
    },
    computed: {
        ...mapState(['playlist', 'playCurrentIndex'])
    },
    mounted() {
        bus.on('isPlay',(res)=>{
        this.paused=res
        this.UpdateTime()
        })        
        // this.$store.dispatch('reqLyric',{id:this.playlist[this.playCurrentIndex].id})
    },
    beforeUpdate(){
      bus.on('isPlay',(res)=>{
        this.isPlay=res
      })
    },
    updated() {
      // this.$store.dispatch('reqLyric',{id:this.playlist[this.playCurrentIndex].id}) 
      // this.getLyricList()   
    },
    methods: {
      change(){
        this.list.isPlay=!this.list.isPlay
        console.log('6666666677',this.list.isPlay);
      },
      //播放或暂停音乐
      play() {
        this.isPlay = !this.isPlay;
        this.isRotate=true
        this.paused=!this.paused
        if (this.isPlay && this.$refs.audio.readyState == 4)
          this.$refs.audio.play();
        else {
          this.$refs.audio.pause();
      }
      },
      //更新时间
      UpdateTime(){
        this.$store.state.id = setInterval(()=>{
          if(this.$refs.audio.currentTime!==null){
            this.$store.commit('setCurrentTime',this.$refs.audio.currentTime)   
          }
          
        },1000)
      },
      getLyricList(lyric){
        this.$store.dispatch('reqLyric',{id:this.playlist[this.playCurrentIndex].id})
        // let key=this.$store.state.playCurrentIndex
        // if(!this.$store.state.lyric){
        // this.$store.dispatch('reqLyric',{id:this.playlist[this.playCurrentIndex].id})
        // }else{
        //   return
        // }    
      },
      /**返回当前的播放时间的函数 */
      audioTimeUpdate() {
        if (this.$refs.audio != null) {
          /**获取currentTime */
          this.currentTime = this.$refs.audio.currentTime;
        }
        console.log('我是当前的播放时间',this.currentTime);
      },
      /**监听音乐已开始播放 */
      musicPlaying(){
      this.isPlay = true;
      /**音乐播放时发射playing事件
       * @param1 对应歌单正在播放音乐的歌曲下标
       * @param2 正在播放歌曲的音乐名字
       */
      if (this.$refs.player != null) this.$refs.player.isPlay = true;
      },
      /**对播放暂停进行监视 */
      musicPause(){
        this.isPlay = false;
        this.paused=true
        if (this.$refs.player != null) this.$refs.player.isPlay = false;
      },
      /**播放方式 */
      toggleSchema(){
        if (this.schemaIndex >= 2) this.schemaIndex = 0;
        else this.schemaIndex++;
      },
      /**监听音乐播放结束、并判断播放方式 */
      musicEnded() {
      console.log("end:" + this.schemaIndex);
      switch (this.schemaIndex) {
        case 0:
          this.currentIndex >= this.playList.length - 1
            ? 0
            : this.currentIndex++; //循环播放
          break;
        case 1:
          this.currentIndex = Math.floor(Math.random() * this.playList.length); //随机播放
          break;
        case 2: //单曲循环
          this.currentIndex = this.currentIndex;
          break;
      }
      },
      bofang(){
        this.$refs.audio.play();
      },
      end(){
        bus.emit('ending','播放结束了')
      }
    },
    components:{
        playMusic
    }
}
</script>
<style lang="less">
.playController {
    background: #fff;
    width: 7.5rem;
    height: 1.2rem;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #ccc;
    z-index: 100;

    .left {
        display: flex;
        padding: 0 0.2rem;

        img {
            width: 0.8rem;
            height: 0.8rem;
            border-radius: 0.4rem;
        }

        .content {
            padding: 0 0.2rem;

            .tips {
                font-size: 0.2rem;
                color: #999;
            }
        }
    }

    .right {
        .iconfont {
            font-size:0.4rem;
            margin: 0 0.2rem;
        }
    }
}
</style>
